<template>
  <div>
    <van-divider>个人信息</van-divider>
    <van-field style="padding: 10px" v-model="username" label="用户名" readonly />
    <van-field style="padding: 10px" v-model="nickName" label="昵称" readonly ></van-field>
    <van-divider dashed="true" hairline="true" content-position="left">头像</van-divider>
    <van-row type="flex" justify="space-between">
      <van-col align="center" style="margin: 0 20px;">
        <van-image
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </van-col>
    </van-row>
    <van-row type="flex" justify="center" style="padding: 20px">
      <van-col span="24" align="center"><van-button style="width: 90%; margin: 5px;" type="danger" block="true" round>退出</van-button></van-col>
    </van-row>
    <TabBar/>
  </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';
export default {
  data() {
    return {
      username: "fangzheng",
      nickName: "fangzheng",
      img: "https://wx1.sinaimg.cn/mw1024/686d7361ly1fpha0mpd5uj21hc0tyws2.jpg"
    };
  },
  methods: {
  },
  components: {
    TabBar
  }
};
</script>

<style lang="css" scoped>
</style>
